<template>
  <div v-show="TFValue1">
    <div style="display: flex;justify-content: center;align-items: center;">
      <div class="common-layout" style="width: 1400px;">
        <el-container>
          <el-header
              style="border: 2px cadetblue solid;height: 100px;display: flex; justify-content: center; align-items: center;border-radius: 10px">
            <div>
            <span style="font-size: 50px;font-weight: bold;color:rgba(0,0,0,1);">
              上凯仪维修管理后台
            </span>
            </div>
          </el-header>
          <el-main style="background-color: rgb(240,247,241);border-radius: 10px">
            <div style="margin-bottom: 10px;display: flex; justify-content: center;">
              <span style="color: grey;margin-right: 10px;font-weight: bold">工单号</span>
              <el-input
                  style="width: 17%;height: 24px;margin-right: 20px"
                  v-model="fuzzy.input_work_order"
                  clearable
              />
              <span style="color: grey;margin-right: 10px;font-weight: bold">物料编号</span>
              <el-input
                  style="width: 17%;height: 24px;margin-right: 20px"
                  v-model="fuzzy.input_Material_No"
                  clearable
              />
              <span style="color: grey;margin-right: 10px;font-weight: bold">泵组编码</span>
              <el-input
                  style="width: 16%;height: 24px;margin-right: 20px"
                  v-model="fuzzy.input_Pump_set_number"
                  clearable
              />
              <span style="color: grey;margin-right: 10px;font-weight: bold">Case</span>
              <el-input
                  style="width: 16%;height: 24px"
                  v-model="fuzzy.input_Case"
                  clearable
              />
            </div>
            <div style="margin-bottom: 10px;display: flex; justify-content: center;">
              <span style="color: grey;font-weight: bold">时间</span>
              <el-date-picker
                  v-model="fuzzy.startTime"
                  style="width: 20%;height: 24px;margin-left:10px;margin-right: 10px"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm"
                  placeholder="时间"
                  clearable
              />
              <span style="color: grey;font-weight: bold">至</span>
              <el-date-picker
                  v-model="fuzzy.endTime"
                  style="width: 20%;height: 24px;margin-left:10px;margin-right: 10px"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm"
                  placeholder="时间"
                  clearable
              />
              <span style="margin-left: 20px;margin-right: 10px;color: grey;font-weight: bold">状态</span>
              <el-radio-group v-model="fuzzy.radio_state">
                <el-radio value="-1" size="large" class="smallOptions">
                  <span style="color: grey;font-size: 15px;">未设置</span>
                </el-radio>
                <el-radio value="0" size="large" class="smallOptions">
                  <span style="color: grey;font-size: 15px;">未完成</span>
                </el-radio>
                <el-radio value="1" size="large" class="smallOptions">
                  <span style="color: grey;font-size: 15px;">已完成</span>
                </el-radio>
                <el-radio value="2" size="large" class="smallOptions">
                  <span style="color: grey;font-size: 15px;">已结单</span>
                </el-radio>
                <el-radio value="3" size="large" class="smallOptions">
                  <span style="color: grey;font-size: 15px;">全部</span>
                </el-radio>
              </el-radio-group>
              <el-button type="success" plain @click="paginatedQueries(1)" style="height: 24px;margin-left: 10px">查询
              </el-button>
              <el-button type="danger" plain @click="cleared()" style="height: 24px;margin-left: 10px">清空</el-button>
            </div>

            <div style="display: flex; justify-content: center;">
              <el-table :data="tableData" stripe style="width: 100%;height: 529px;background-color: rgb(240,247,241);">
                <el-table-column show-overflow-tooltip align="center" prop="work_order" label="工单" width="137"/>
                <el-table-column show-overflow-tooltip align="center" prop="material_No" label="物料编号" width="137"/>
                <el-table-column show-overflow-tooltip align="center" prop="name" label="名称" width="137"/>
                <el-table-column show-overflow-tooltip align="center" prop="pump_Unit_Number" label="泵组编号"
                                 width="137"/>
                <el-table-column show-overflow-tooltip align="center" prop="case" label="Case" width="137"/>
                <el-table-column show-overflow-tooltip align="center" prop="customer" label="客户" width="137"/>
                <el-table-column show-overflow-tooltip align="center" prop="urgent" label="加急" width="137">
                  <template #default="scope">
                    <el-tag v-if="scope.row.state == 0"
                            :type="scope.row.urgent === true ? 'danger' : 'warning'"
                            disable-transitions
                    ><span v-if="scope.row.urgent === true">加急检修</span><span v-else>待检修</span></el-tag
                    >
                    <el-tag v-if="scope.row.state == 1"
                            :type="scope.row.urgent ='success'"
                            disable-transitions
                    ><span>完成</span></el-tag>
                    <el-tag v-if="scope.row.state == 2"
                            :type="scope.row.urgent ='primary'"
                            disable-transitions
                    ><span>已结单</span></el-tag>
                    <el-tag v-if="scope.row.state == -1"
                            :type="scope.row.urgent ='info'"
                            disable-transitions
                    ><span>未设置</span></el-tag>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="功能" #default="scope">
                  <!--使用 <template #default="scope"> 来定义作用域插槽。这里的 scope 是一个对象，包含了当前行的数据。-->
                  <el-button type="primary" plain @click="selByCaseDialog(scope.row.case)">工序</el-button>
                  <el-button type="warning" plain @click="test1(scope.row.case)">修改</el-button>
                  <el-button type="danger" plain @click="test4(scope.row.case)">删除</el-button>
                  <el-button type="primary" plain @click="test2(scope.row.case)">核验</el-button>
                  <el-button type="info" plain @click="test3(scope.row.case,scope.row.work_order)">导出</el-button>
                </el-table-column>


              </el-table>
            </div>
            <div style="display: flex; justify-content: center;">
              <!-- 分页组件 -->
              <el-pagination
                  size="small"
                  layout="prev, pager, next"
                  :total="total"
                  :page-size="10"
                  background
                  :current-page="currentPage"
                  @current-change="handleCurrentChange"
              />
            </div>
          </el-main>
        </el-container>
      </div>
    </div>
  </div>
  <div v-show="TFValue2" class="report-header">
    <el-button type="success" plain @click="updateTFValue()" style="width: 625px;height:50px;font-size: 20px">返回
    </el-button>
    <el-button type="warning" plain @click="updateValue()" style="width: 625px;height:50px;font-size: 20px">修改
    </el-button>
    <div class="title-container">
      <Table1 v-if="process.production_processes_1" v-bind:input_Case="inputCaseValue" ref="childRef1"/>
      <Table2 v-if="process.production_processes_2" v-bind:input_Case="inputCaseValue" ref="childRef2"/>
      <Table3 v-if="process.production_processes_3" v-bind:input_Case="inputCaseValue" ref="childRef3"/>
      <Table4 v-if="process.production_processes_4" v-bind:input_Case="inputCaseValue" ref="childRef4"/>
      <Table5 v-if="process.production_processes_5" v-bind:input_Case="inputCaseValue" ref="childRef5"/>
      <Table6 v-if="process.production_processes_6" v-bind:input_Case="inputCaseValue" ref="childRef6"/>
      <Table7 v-if="process.production_processes_7" v-bind:input_Case="inputCaseValue" ref="childRef7"/>
      <Table8 v-if="process.production_processes_8" v-bind:input_Case="inputCaseValue" ref="childRef8"/>
      <Table9 v-if="process.production_processes_9" v-bind:input_Case="inputCaseValue" ref="childRef9"/>
      <Table10 v-if="process.production_processes_10" v-bind:input_Case="inputCaseValue" ref="childRef10"/>
    </div>
    <el-button type="success" plain @click="updateTFValue()" style="width: 625px;height:50px;font-size: 20px">返回
    </el-button>
    <el-button type="warning" plain @click="updateValue()" style="width: 625px;height:50px;font-size: 20px">修改
    </el-button>
  </div>
  <div v-show="TFValue3">
    <el-button type="success" plain @click="updateTFValue2()" style="width: 100px;height:50px;font-size: 20px">返回
    </el-button>
    <el-button type="info" plain @click="handleExport()" style="width: 100px;height:50px;font-size: 20px">导出
    </el-button>
    <div id="pdfDom" class="div-container">
      <!--      <div style="height: 2250px">
              <Table1Value v-bind:input_Case="inputCaseValue2"/>
            </div>
            <div style="height: 2250px">
              <Table2Value v-bind:input_Case="inputCaseValue2"/>
            </div>
            <div style="height: 2250px">
              <Table3Value v-bind:input_Case="inputCaseValue2"/>
              <Table4Value v-bind:input_Case="inputCaseValue2"/>
              <Table5Value v-bind:input_Case="inputCaseValue2"/>
            </div>
            <div style="height: 2250px">
              <Table6Value v-bind:input_Case="inputCaseValue2"/>
              <Table7Value v-bind:input_Case="inputCaseValue2"/>
              <Table8Value v-bind:input_Case="inputCaseValue2"/>
            </div>
            <div style="height: 2250px">
              <Table9Value v-bind:input_Case="inputCaseValue2"/>
            </div>
            <div style="height: 2250px">
              <Table10Value v-bind:input_Case="inputCaseValue2"/>
            </div>-->
      <div v-if="process.production_processes_1" style="height: 2250px">
        <Table1Value v-bind:input_Case="inputCaseValue2"/>
      </div>
      <div v-if="process.production_processes_2" style="height: 2250px">
        <Table2Value v-bind:input_Case="inputCaseValue2"/>
      </div>
      <div v-if="process.production_processes_3  || process.production_processes_4 || process.production_processes_5"
           style="height: 2250px">
        <Table3Value v-if="process.production_processes_3" v-bind:input_Case="inputCaseValue2"/>
        <Table4Value v-if="process.production_processes_4" v-bind:input_Case="inputCaseValue2"/>
        <Table5Value v-if="process.production_processes_5" v-bind:input_Case="inputCaseValue2"/>
      </div>
      <div v-if="process.production_processes_6  || process.production_processes_7 || process.production_processes_8"
           style="height: 2250px">
        <Table6Value v-if="process.production_processes_6" v-bind:input_Case="inputCaseValue2"/>
        <Table7Value v-if="process.production_processes_7" v-bind:input_Case="inputCaseValue2"/>
        <Table8Value v-if="process.production_processes_8" v-bind:input_Case="inputCaseValue2"/>
      </div>
      <div v-if="process.production_processes_9" style="height: 2250px">
        <Table9Value v-bind:input_Case="inputCaseValue2"/>
      </div>
      <div v-if="process.production_processes_10" style="height: 2250px">
        <Table10Value v-bind:input_Case="inputCaseValue2"/>
      </div>
    </div>
  </div>
  <div v-show="TFValue4" class="report-header">
    <el-button type="success" plain @click="updateTFValue3()" style="width: 415px;height:50px;font-size: 20px">返回
    </el-button>
    <el-button type="warning" plain @click="Statements()" style="width: 415px;height:50px;font-size: 20px">结单
    </el-button>
    <el-popconfirm
        title="是否强制结单?"
        @confirm="MandatoryStatements"
    >
      <template #reference>
        <el-button type="danger" plain  style="width: 415px;height:50px;font-size: 20px">
          强制结单
        </el-button>
      </template>
    </el-popconfirm>
    <div class="title-container">
      <Table1Value v-if="process.production_processes_1" v-bind:input_Case="inputCaseValue" ref="childRef1"/>
      <Table2Value v-if="process.production_processes_2" v-bind:input_Case="inputCaseValue" ref="childRef2"/>
      <Table3Value v-if="process.production_processes_3" v-bind:input_Case="inputCaseValue" ref="childRef3"/>
      <Table4Value v-if="process.production_processes_4" v-bind:input_Case="inputCaseValue" ref="childRef4"/>
      <Table5Value v-if="process.production_processes_5" v-bind:input_Case="inputCaseValue" ref="childRef5"/>
      <Table6Value v-if="process.production_processes_6" v-bind:input_Case="inputCaseValue" ref="childRef6"/>
      <Table7Value v-if="process.production_processes_7" v-bind:input_Case="inputCaseValue" ref="childRef7"/>
      <Table8Value v-if="process.production_processes_8" v-bind:input_Case="inputCaseValue" ref="childRef8"/>
      <Table9Value v-if="process.production_processes_9" v-bind:input_Case="inputCaseValue" ref="childRef9"/>
      <Table10Value v-if="process.production_processes_10" v-bind:input_Case="inputCaseValue" ref="childRef10"/>
    </div>
    <el-button type="success" plain @click="updateTFValue3()" style="width: 415px;height:50px;font-size: 20px">返回
    </el-button>
    <el-button type="warning" plain @click="Statements()" style="width: 415px;height:50px;font-size: 20px">结单
    </el-button>
    <el-popconfirm
        title="是否强制结单?"
        @confirm="MandatoryStatements"
    >
      <template #reference>
        <el-button type="danger" plain  style="width: 415px;height:50px;font-size: 20px">
          强制结单
        </el-button>
      </template>
    </el-popconfirm>
  </div>
  <div style="display: flex;justify-content: center;align-items: center;">
    <el-dialog v-model="dialogFormVisible" :showClose="false" title="工序选择" width="200">
      <div class="form-container">
        <el-form :model="process" style="max-width: 300px; /* 根据需要调整最大宽度 */margin: auto; /* 水平居中 */">
          <el-checkbox disabled v-model="process.production_processes_1" label="干泵初检"></el-checkbox>
          <el-checkbox v-model="process.production_processes_2" label="干泵拆解"></el-checkbox>
          <el-checkbox v-model="process.production_processes_3" label="干泵清洗"></el-checkbox>
          <el-checkbox v-model="process.production_processes_4" label="严损判断"></el-checkbox>
          <el-checkbox v-model="process.production_processes_5" label="罗氏干泵装配"></el-checkbox>
          <el-checkbox v-model="process.production_processes_6" label="多级干泵装配"></el-checkbox>
          <el-checkbox v-model="process.production_processes_7" label="吊装"></el-checkbox>
          <el-checkbox v-model="process.production_processes_8" label="机组装配记录"></el-checkbox>
          <el-checkbox v-model="process.production_processes_9" label="机组电控系统检验"></el-checkbox>
          <el-checkbox disabled v-model="process.production_processes_10" label="出厂测试报告"></el-checkbox>
          <el-checkbox v-model="process.urgent" label="加急"></el-checkbox>
        </el-form>
      </div>
      <div class="button-container">
        <el-button @click="TFdialog()">取消</el-button>
        <el-button type="primary" @click="submitProcess()">
          修改
        </el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script setup lang="ts">
import {ref, reactive, watch} from 'vue';
import {onMounted, InstanceType} from 'vue';
import axios from 'axios';
import {ElMessage} from "element-plus";


import Table1 from './main/VueTable_1.vue'
import Table2 from './main/VueTable_2.vue'
import Table3 from './main/VueTable_3.vue'
import Table4 from './main/VueTable_4.vue'
import Table5 from './main/VueTable_5.vue'
import Table6 from './main/VueTable_6.vue'
import Table7 from './main/VueTable_7.vue'
import Table8 from './main/VueTable_8.vue'
import Table9 from './main/VueTable_9.vue'
import Table10 from './main/VueTable_10.vue'


import Table1Value from './main/VueTable_1_Value.vue'
import Table2Value from './main/VueTable_2_Value.vue'
import Table3Value from './main/VueTable_3_Value.vue'
import Table4Value from './main/VueTable_4_Value.vue'
import Table5Value from './main/VueTable_5_Value.vue'
import Table6Value from './main/VueTable_6_Value.vue'
import Table7Value from './main/VueTable_7_Value.vue'
import Table8Value from './main/VueTable_8_Value.vue'
import Table9Value from './main/VueTable_9_Value.vue'
import Table10Value from './main/VueTable_10_Value.vue'

import {htmlPdf} from "./utils/htmlToPDF.js"

const childRef1 = ref<InstanceType<typeof Table1 | null>>(null);
const childRef2 = ref<InstanceType<typeof Table2 | null>>(null);
const childRef3 = ref<InstanceType<typeof Table3 | null>>(null);
const childRef4 = ref<InstanceType<typeof Table4 | null>>(null);
const childRef5 = ref<InstanceType<typeof Table5 | null>>(null);
const childRef6 = ref<InstanceType<typeof Table6 | null>>(null);
const childRef7 = ref<InstanceType<typeof Table7 | null>>(null);
const childRef8 = ref<InstanceType<typeof Table8 | null>>(null);
const childRef9 = ref<InstanceType<typeof Table9 | null>>(null);
const childRef10 = ref<InstanceType<typeof Table10 | null>>(null);
const updateValue = function () {
  childRef1.value.someMethod()
  childRef2.value.someMethod()
  childRef3.value.someMethod()
  childRef4.value.someMethod()
  childRef5.value.someMethod()
  childRef6.value.someMethod()
  childRef7.value.someMethod()
  childRef8.value.someMethod()
  childRef9.value.someMethod()
  childRef10.value.someMethod()
}
const fuzzy = reactive({
  input_work_order: '',//工单号
  input_Material_No: '',//物料编码
  input_Pump_set_number: '',//泵组编号
  input_Case: '',//Case
  startTime: '',//开始时间
  endTime: '',//结束时间
  radio_state: '3'//状态
})
const cleared = function () {
  fuzzy.input_work_order = '';
  fuzzy.input_Material_No = '';
  fuzzy.input_Pump_set_number = '';
  fuzzy.input_Case = '';
  fuzzy.startTime = '';
  fuzzy.endTime = '';
  fuzzy.radio_state = '3';
  paginatedQueries(1)
}

const handleExport = function () {
  // var fileName = '雄创测试报表PDF'
  var fileName = workOrderValue2.value
  const fileList = document.getElementsByClassName('pdfDom')   // 很重要
  htmlPdf(fileName, document.querySelector('#pdfDom'), fileList)
}
const total = ref(null); // 总页数，根据你的组件数量来设置
const currentPage = ref(1); // 当前页码

const tableData = reactive([])

const TFValue1 = ref(true);
const TFValue2 = ref(false);
const TFValue3 = ref(false);
const TFValue4 = ref(false);
const updateTFValue = function () {
  TFValue1.value = true
  TFValue2.value = false
}
const updateTFValue2 = function () {
  TFValue1.value = true
  TFValue3.value = false
}
const updateTFValue3 = function () {
  TFValue1.value = true
  TFValue4.value = false
}
onMounted(() => {
  console.log(tableData)
  axios.get('http://192.168.110.84:8081/main/selAll')
      .then(response => {
        // 请求成功后的处理
        console.log(response.data);
        if (response.data.code === 1) {
          total.value = response.data.data;
          ElMessage({
            message: "加载成功",
            type: 'success',
          })
        } else {
          ElMessage.error(response.data.message)
        }
      });
  paginatedQueries(1)
});
watch(currentPage, (New) => {
  paginatedQueries(New)
})
//分页查询
const paginatedQueries = function (page) {
  if (fuzzy.input_work_order === '' && fuzzy.input_Material_No === ''
      && fuzzy.input_Pump_set_number === '' && fuzzy.input_Case === ''
      && fuzzy.startTime === '' && fuzzy.endTime === '' && fuzzy.radio_state === '3'
  ) {
    axios.get('http://192.168.110.84:8081/main/selAll')
        .then(response => {
          // 请求成功后的处理
          console.log(response.data);
          if (response.data.code === 1) {
            total.value = response.data.data;
          } else {
            ElMessage.error(response.data.message)
          }
        });
    axios.get('http://192.168.110.84:8081/main/selPage/' + page)
        .then(response => {
          // 请求成功后的处理
          console.log(response.data);
          tableData.splice(0, tableData.length);//清空原本的数组
          if (response.data.code === 1) {
            Object.keys(response.data.data).forEach(key => {
              tableData[key] = response.data.data[key];
            });
          } else {
            ElMessage.error(response.data.message)
          }
        });
  } else {
    axios.post('http://192.168.110.84:8081/main/selFuzzyAll', fuzzy)
        .then(response => {
          // 请求成功后的处理
          console.log(response.data);
          if (response.data.code === 1) {
            total.value = response.data.data;
          } else {
            ElMessage.error(response.data.message)
          }
        });
    axios.post('http://192.168.110.84:8081/main/selFuzzyPage/' + page, fuzzy)
        .then(response => {
          // 请求成功后的处理
          console.log(response.data);
          tableData.splice(0, tableData.length);//清空原本的数组
          if (response.data.code === 1) {
            Object.keys(response.data.data).forEach(key => {
              tableData[key] = response.data.data[key];
            });
          } else {
            ElMessage.error(response.data.message)
          }
        });
  }
}
// 页码改变时的事件处理
const handleCurrentChange = (val) => {
  currentPage.value = val;
};
const inputCaseValue = ref('')
const inputCaseValue2 = ref('')
const inputCaseValue3 = ref('')
const workOrderValue2 = ref('')
const test1 = function (data) {
  selProcess(data)
  TFValue1.value = false
  TFValue2.value = true
  inputCaseValue.value = data

}
const test2 = function (data) {
  selProcess(data)
  TFValue1.value = false
  TFValue4.value = true
  inputCaseValue3.value = data
}
const test3 = function (caseDate, workOrderDate) {
  selProcess(caseDate)
  TFValue1.value = false
  TFValue3.value = true
  inputCaseValue2.value = caseDate
  workOrderValue2.value = workOrderDate
}
const test4 = function (data) {
  console.log(data)
  ElMessage.error("该功能暂不实现")
}
const process = reactive({
  case: '',
  production_processes_1: true,
  production_processes_2: true,
  production_processes_3: true,
  production_processes_4: true,
  production_processes_5: true,
  production_processes_6: true,
  production_processes_7: true,
  production_processes_8: true,
  production_processes_9: true,
  production_processes_10: true,
  urgent: false,
})

function resetProcess() {
  process.case = '';
  process.production_processes_1 = true;
  process.production_processes_2 = true;
  process.production_processes_3 = true;
  process.production_processes_4 = true;
  process.production_processes_5 = true;
  process.production_processes_6 = true;
  process.production_processes_7 = true;
  process.production_processes_8 = true;
  process.production_processes_9 = true;
  process.production_processes_10 = true;
  process.urgent = false;
}

const dialogFormVisible = ref(false)

function TFdialog() {
  resetProcess()
  dialogFormVisible.value = false;
}

function selByCaseDialog(data) {
  selProcess(data)
  dialogFormVisible.value = true;
}

function selProcess(data) {
  axios.get('http://192.168.110.84:8081/main/process/' + data)
      .then(response => {
        // 处理响应
        const data = response.data.data;
        if (response.data.code === 1) {
          if (data !== null) {
            // 遍历data对象并更新form
            Object.keys(data).forEach(key => {
              process[key] = data[key];
            });
          }
        } else {
          ElMessage.error(response.data.message)
        }
      });
}

function submitProcess() {
  axios.post('http://192.168.110.84:8081/main/updateProcess', process)
      .then(response => {
        // 请求成功后的处理
        console.log(response.data);
        if (response.data.code === 1) {
          console.log(response.data.data)
          ElMessage({
            message: response.data.data,
            type: 'success',
          })
          paginatedQueries(currentPage.value)
        } else {
          ElMessage.error(response.data.message)
        }
      });
  dialogFormVisible.value = false;

}

function Statements() {
  axios.get('http://192.168.110.84:8081/main/statements/' + inputCaseValue3.value)
      .then(response => {
        // 请求成功后的处理
        console.log(response.data);
        if (response.data.code === 1) {
          ElMessage.success(response.data.data)
          updateTFValue3()
        } else {
          ElMessage.error(response.data.message)
        }
      });
}

function MandatoryStatements() {
  axios.get('http://192.168.110.84:8081/main/mandatoryStatements/' + inputCaseValue3.value)
      .then(response => {
        // 请求成功后的处理
        console.log(response.data);
        if (response.data.code === 1) {
          ElMessage.success(response.data.data)
          updateTFValue3()
        } else {
          ElMessage.error(response.data.message)
        }
      });
}
</script>

<style scoped>
#adminBackend {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.report-header {
  text-align: center;
}

.title-container {
  display: inline-block;
  text-align: center;
}

.el-radio.el-radio--large {
  height: 0;
}

.el-radio {
  margin-right: 10px;
}

.div-container {
  pointer-events: none;
}
</style>